<template>
    <div class="task-finish-item">
        <div class="task-finish-item-left">
            <img src="@/assets/1.jpg" class="avadar" />
        </div>
        <div class="task-finish-item-right">
            <div class="task-top">
                <div class="task-creator">
                    <h3>
                        {{ data.task.addadmin }}<span>{{ data.task.targetDeptids }}</span>
                    </h3>
                    <div>
                        <span>{{ taskType[data.taskAccept.taskType] }}</span>
                        <van-rate :value="data.taskAccept.importantLevel" :size="14" color="#FDAA01" void-icon="star" void-color="#ffffff" />
                    </div>
                </div>
                <div class="task-status">
                    <span class="task-status-text">{{status[data.taskAccept.status]}}</span>
                    <span class="task-status-type">{{status[data.taskAccept.importantLevel]}}</span>
                </div>
            </div>
            <div class="task-content">
                <div class="task-content-text">{{status[data.task.content]}}</div>
                <div class="task-content-picture" v-if="data.task.imgList">
                    <div class="task-content-picture-item" v-for="(url,index) in data.task.imgList" :key="index">
                        <img :src="url" />
                    </div>
                </div>
            </div>
            <div class="task-receive-time">{{data.taskAccept.addTime}}接单</div>
            <div class="task-remark">
                <fold-text content="备注：没有备注字段"></fold-text>
            </div>
            <div class="task-submit">
                <img src="@/assets/images/seal-finish.png" class="icon-seal" v-if="data.taskAccept.status === 3" />
                <p class="task-submit-text"><a>我自己</a>:{{data.taskAccept.finishRemark}}</p>
                <div class="task-submit-picture" v-if="data.taskAccept.imgList">
                    <div class="task-submit-picture-item" v-for="(url,index) in data.taskAccept.imgList" :key="index">
                        <img :src="url" />
                    </div>
                </div>
            </div>
            <div class="task-finish-time">
                <span>{{data.taskAccept.finishTime}}完成，耗时1天</span>
            </div>
        </div>
    </div>
</template>

<script>
import { Button, Rate } from "vant";
import FoldText from "@/components/foldText";
/**
 * taskData{
 *  createUser	object	任务的创建人 ,User
    id	number	用户编号	
    username	string	用户名	
    password	string	密码	
    mobile	string	电话号码  空为未开启手机验证	
    userName	string	昵称	
    avatar	string	头像	
    realname	string	真实姓名	
    status	number	账号状态 1正常 0禁用	
    addtime	string	生产时间	
    updatetime	string	更新时间	
    email	string	邮箱	
    levelId	number 关系等级(1-9介绍关系)	
    lastLogintime	string	上次登录时间
    taskResourceList	object []	任务机资源列表 ,TaskResource	
item 类型: object

id	number	
taskId	number	任务id	

resourceUrl	string	任务资源url	
mock: @string

addadmin	string	添加人	
mock: @string

addTime	string	添加时间
 * }
 */
export default {
    name: "monthly-item",
    components: {
        [Button.name]: Button,
        [Rate.name]: Rate,
        FoldText,
    },
    props: {
        data: {
            type: Object,
            default: () => {
                return {
                    taskAccept: {},
                    task: {},
                };
            },
        },
    },
    data() {
        return {
            taskType: {
                "1": "本职工作",
                "2": "组织建设",
                "3": "额外工作",
            },
            status: {
                0: '已接单',
                1: '进行中',
                2: '取消',
                3: '完成',
            },
        };
    },
    computed() {},
    mounted() {},
    methods: {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.task-finish-item {
    background: #fff;
    padding: 30px 20px;
    display: flex;
    &-left {
        width: 80px;
        margin-right: 20px;
        .avadar {
            width: 80px;
            height: 80px;
            border-radius: 8px;
        }
    }
    &-right {
        flex-grow: 1;
        text-align: left;
    }
}

.task-top {
    display: flex;
    justify-content: space-between;
    .task-creator {
        text-align: left;
        h3 {
            font-size: 32px;
            color: #333;
            line-height: 1.2;
            margin-bottom: 10px;
            span {
                font-size: 24px;
                color: #999;
                margin-left: 20px;
                font-weight: normal;
            }
        }
        div {
            display: flex;
            align-items: center;
            span {
                font-size: 24px;
                color: #999;
                margin-right: 20px;
            }
        }
    }
    .task-status {
        text-align: right;
        &-text {
            display: block;
            font-size: 26px;
            color: #00b500;
            margin-bottom: 14px;
        }
        &-type {
            display: inline-block;
            font-size: 22px;
            color: #ec407a;
            background: #fbdce6;
            width: 108px;
            height: 34px;
            text-align: center;
            line-height: 34px;
            background: #fbdce6;
            border-radius: 4px;
        }
    }
}

.task-content {
    padding: 20px 0;
    &-text {
        font-size: 30px;
        text-align: left;
    }
    &-picture {
        margin-top: 30px;
        display: flex;
        &-item {
            width: 160px;
            height: 160px;
            margin-right: 16px;
            background: #eee;
            position: relative;
            img {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                max-width: 100%;
                max-height: 100%;
            }
        }
    }
}

.task-receive-time {
    font-size: 24px;
    color: #999;
    margin-top: 20px;
}
.task-remark {
    margin-top: 20px;
    width: 600px;
}
.task-submit {
    background: #f7f7f7;
    padding: 20px;
    position: relative;
    margin-top: 20px;
    .icon-seal {
        z-index: 2;
        position: absolute;
        right: 0;
        top: 0;
        width: 108px;
        height: 108px;
    }
    &-text {
        font-size: 28px;
        color: #333;
        a {
            color: #576b95;
        }
    }
    &-picture {
        margin-top: 30px;
        display: flex;
        &-item {
            width: 160px;
            height: 160px;
            margin-right: 16px;
            background: #fff;
            position: relative;
            img {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                max-width: 100%;
                max-height: 100%;
            }
        }
    }
}
.task-finish-time {
    font-size: 24px;
    color: #999;
    margin-top: 20px;
    display: flex;
}
</style>
